const lis = document.querySelectorAll(".slide li")
const banner = document.querySelector(".banner")
function gun() {
    lis[0].className = "active"
    for (let i = 0; i < lis.length; i++) {
        const item = lis[i]
        item.onclick = function () {
            for (let j = 0; j < lis.length; j++) {
                lis[j].className = ""
            }
            this.className = "active"
            banner.setAttribute("style", `left: calc(-8 * ${i}rem `)
        }
    }

}
let index = 0
const left = document.querySelector(".bigbox .lef")
const right = document.querySelector(".bigbox .rig")
function rights() {
    right.onclick = function () {
        index++;
        if (index > 2) {
            index = 0
        }
        banner.setAttribute("style", `left: calc(-8 * ${index}rem `)
        for (let j = 0; j < lis.length; j++) {
            lis[j].className = ""
        }
        lis[index].className = "active"
    }
}
function lefts() {
    left.onclick = function () {
        index--;
        if (index < 0) {
            index = 2
        }
        banner.setAttribute("style", `left: calc(-8 * ${index}rem `)
        for (let j = 0; j < lis.length; j++) {
            lis[j].className = ""
        }
        lis[index].className = "active"
    }
}
rights()
gun()
lefts()
let timer = setInterval(function () {
    right.click();
}, 3000)

const box = document.querySelector(".bigbox")
box.onmouseover = function () {
    clearInterval(timer)
    left.setAttribute("style", "display: block;")
    right.setAttribute("style", "display: block;")
}
box.onmouseout = function () {
    timer = setInterval(function () {
        right.click();
    }, 3000)
    left.setAttribute("style", "display: none;")
    right.setAttribute("style", "display: none;")
}

